<template>
	<div>
		<div class="container">
			<div class="box">
				<!-- 左边 -->
				<div class="left">
					<img src="./assets/images/img_1_u1946.png" alt />
				</div>
				<!-- 右边 -->
				<div class="right">
					<!-- 导航栏 -->
					<ul>
						<li :class="{ active: navId == 0 }" @click="onNav(0)">正常(20)</li>
						<li :class="{ active: navId == 1 }" @click="onNav(1)">
							中危(
							<span>2</span>)
						</li>
						<li :class="{ active: navId == 2 }" @click="onNav(2)">
							中危(
							<span>2</span>)
						</li>
						<li :class="{ active: navId == 3 }" @click="onNav(3)">平台信息</li>
					</ul>

					<!-- 表格内容 -->
					<div class="nav-content" v-show="navId == 0">
						<table>
							<tr class="theader">
								<th>序号</th>
								<th>风险</th>
								<th>编码</th>
								<th>名称</th>
								<th>类别</th>
								<th>环境跟踪</th>
								<th>监测检测跟踪</th>
								<th>图片</th>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
							<tr>
								<td class="fs14">1</td>
								<td class="fs13 c3">无</td>
								<td class="fs10">TS – V – 2001</td>
								<td class="fs10">5号温度控制阀</td>
								<td>FPSO</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<a href="javascript:;">查看</a>
								</td>
								<td>
									<img src="./assets/images/u1259.png" alt />
								</td>
							</tr>
						</table>
						<div class="page">
							<el-pagination
								background
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage4"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="10"
								layout="prev, pager, next, sizes, jumper"
								:total="40"
							></el-pagination>
						</div>
					</div>

					<div class="nav-content" v-show="navId == 1">
						<div class="page">
							<el-pagination
								background
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage4"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="10"
								layout="prev, pager, next, sizes, jumper"
								:total="40"
							></el-pagination>
						</div>
					</div>

					<div class="nav-content" v-show="navId == 2">
						<div class="page">
							<el-pagination
								background
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="currentPage4"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="10"
								layout="prev, pager, next, sizes, jumper"
								:total="40"
							></el-pagination>
						</div>
					</div>
					<div class="nav-content" v-show="navId == 3">
						<div class="msg">
							<ul>
								<li>
									平台名称：
									<span>海洋石油981</span>
								</li>
								<li>
									国别：
									<span>中国</span>
								</li>
								<li>
									行业：
									<span>油气勘探</span>
								</li>
							</ul>

							<ul>
								<li>
									平台编号：
									<span>CN-USP-FPSO-HYSY118</span>
								</li>
								<li>
									EDIS编码：
									<span></span>
								</li>
								<li>
									地理信息编码：
									<span>DD-DWG-FPSO(TS) -PR01</span>
								</li>
							</ul>

							<ul>
								<li>
									所属公司：
									<span>南海东分公司</span>
								</li>
								<li>
									所属区域：
									<span>南海</span>
								</li>
								<li>
									所属油田：
									<span>流花11-1</span>
								</li>
							</ul>

							<ul>
								<li>
									平台分类：
									<span>FPSO</span>
								</li>
							</ul>
							<div class="footer">
								<p>平台描述：</p>
								<div>
									由上层工作甲板、下层浮体结构、中间立柱或桁架3
									部分组成。下层浮体结构又分下船体式和浮箱式两种，下船体式更利于航行，故新建造的自航半潜式平台多采用双下船体式。
									这种平台作业时处于半潜状态，采用锚泊定位或动力定位。作业后，排出压载舱内的水，上浮至拖航吃水线，即可收锚移位。
									过去建造的少数半潜式平台兼有坐底式的功能，也可以在浅水区坐落海底进行作业
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 记录与信息 -->
			<div class="msg2">
				<!-- 导航 -->
				<ul>
					<li :class="{ active: navMsg == 0 }" @click="onNavMsg(0)">诊断记录</li>
					<li :class="{ active: navMsg == 1 }" @click="onNavMsg(1)">结构物信息</li>
				</ul>
				<!-- 内容部分 -->
				<!-- 诊断记录 -->
				<div class="content" v-show="navMsg == 0"></div>

				<!-- 结构物信息 -->
				<div class="content" v-show="navMsg == 1">
					<table>
						<!-- 1 -->
						<tr>
							<td>
								所属管道编码：
								<span>WEN14_3WHPA-SPO-01</span>
							</td>
							<td>
								类型：
								<span>立管</span>
							</td>
							<td></td>
							<td></td>
						</tr>
						<!-- 2 -->
						<tr>
							<td>
								内径：
								<span>95mm</span>
							</td>
							<td>
								空气中重量：
								<span>25KG</span>
							</td>
							<td>
								海水中空管重量：
								<span>15KG</span>
							</td>
							<td>
								海水中充介质重量：
								<span>80KG</span>
							</td>
						</tr>
						<!-- 2 -->
						<tr>
							<td>
								内径：
								<span>95mm</span>
							</td>
							<td>
								空气中重量：
								<span>25KG</span>
							</td>
							<td>
								海水中空管重量：
								<span>15KG</span>
							</td>
							<td>
								海水中充介质重量：
								<span>80KG</span>
							</td>
						</tr>
						<!-- 2 -->
						<tr>
							<td>
								内径：
								<span>95mm</span>
							</td>
							<td>
								空气中重量：
								<span>25KG</span>
							</td>
							<td>
								海水中空管重量：
								<span>15KG</span>
							</td>
							<td>
								海水中充介质重量：
								<span>80KG</span>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {}
</script>

<style lang="scss" scoped></style>
